/* 统一深色主题样式 */
:root {
    --header-bg: #2d3a4b;
    --sidebar-bg: #304156;
    --sidebar-active: rgba(64, 158, 255, 0.1);
    --sidebar-active-border: #409EFF;
    --sidebar-hover: rgba(255,255,255,0.1);
    --sidebar-text: #bfcbd9;
    --sidebar-text-active: #409EFF;
    --content-bg: #f5f7fa;
    --card-bg: white;
}

/* 基础布局 */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 头部导航 */
.header {
    background: var(--header-bg);
    color: white;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 侧边栏菜单 */
.sidebar {
    width: 200px;
    background: var(--sidebar-bg);
    padding: 20px 0;
}

.menu-item {
    padding: 12px 20px;
    color: var(--sidebar-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

.menu-item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
}

.menu-item.active {
    background: var(--sidebar-active);
    color: var(--sidebar-text-active);
    border-right: 3px solid var(--sidebar-active-border);
}

/* 内容区域 */
.content {
    flex: 1;
    padding: 20px;
    overflow: auto;
    background: var(--content-bg);
}

/* 卡片样式 */
.content-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}